<html>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
    .box:hover {
        box-shadow: 0 8px 8px rgba(10, 16, 20, .24), 0 0 8px rgba(10, 16, 20, .12);
        text-decoration: none;
        border: 0;
        transform: translateY(-5px);
    }

    .head {
        margin-top: 2rem;
        height: 3.8rem;
        line-height: 3.8rem;
    }

    .text_hidden {
        height: 3.8rem;
        overflow: hidden;
        display: -webkit-box;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        text-align: center;
    }

    .h2_hidden {
        height: 1.8rem;
        line-height: 1.8rem;
        overflow: hidden;
        display: -webkit-box;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        text-align: center;
    }

    .photo_hight {
        position: relative;
        height: 27.5rem;
    }

    .photo_hidden {
        width: 100%;
        height: 15.5rem;
    }

    .photo_hidden img {
        height: 15.5rem;
        width: 100%;
    }

    .photo_hight a {
        color: #000;
    }

    /* .recommend {
        color: red;
        position: absolute;
        background-color: #fff;
        top: 0rem;
        right: 0rem;
    } */

    .layui-btn-sm i {
        font-size: 2.4rem !important;
    }

    /*.praise::after {*/
    /*    content: '50';*/
    /*}*/

    /*.browse::after {*/
    /*    content: '150';*/
    /*}*/

    .tab {
        display: flex;
        height: auto;
        margin-top: 5rem;
        justify-content: space-around;
    }

    .tab_list {
        margin-top: 5rem;
        height: auto;
    }

    .tab_list ul li {
        overflow: hidden;
        margin-top: 2.1rem;
        height: 1.6rem;
        line-height: 1.6rem;
        font-weight: 700;
        font-size: 1.6rem;
        cursor: pointer;
    }

    .tab_con {
        height: auto;
    }

    .item {
        height: auto;
        display: none;
    }
</style>
<div class="tab">
    <!-- 目录导引 -->
    <div class="tab_list" style="display: none">
        <ul id="college-list-body">
            <!--            <li class="current">文学院</li>-->
            <!--            <li>法学院</li>-->
            <!--            <li>历史文化学院</li>-->
            <!--            <li>教育科学学院</li>-->
            <!--            <li>新闻与传播学院</li>-->
            <!--            <li>体育学院</li>-->
            <!--            <li>软件学院</li>-->
            <!--            <li>生命科学院</li>-->
        </ul>
    </div>
    <!-- 具体展示 -->
    <div class="tab_con" id="college-body">
        <!--        <div class="item" style="display: block;">-->
        <!--            <div class="head">-->
        <!--                <h3><strong>文学院</strong></h3>-->
        <!--            </div>-->
        <!--            <div class="container " style="margin-top: 2rem; background-color: #fff; ">-->
        <!--                <div class="row ">-->
        <!--                    <div class=" col-md-3 box col-xs-6 photo_hight">-->
        <!--                        <div class="photo_hidden"><img-->
        <!--                                src="http://sxgl.henu.edu.cn:80//index/showImage.do?type=3&img=%2Fuploadimg%2F%E5%9B%BE%E7%89%87%2F2020%E5%B9%B409%E6%9C%8807%E6%97%A5__7f41b4201612184c515924169a8079b09d09a147%2F4103535362.jpg "-->
        <!--                                alt=" " class="img-responsive center-block"></div>-->
        <!--                        <a href="#">-->
        <!--                            <h4 style="text-align: center;"><strong>河大LOGO</strong></h4>-->
        <!--                            <p class="text_hidden">人海加油</p>-->
        <!--                            &lt;!&ndash; <span class="layui-badge-rim recommend layui-bg-blue">Hot</span> &ndash;&gt;-->
        <!--                        </a>-->
        <!--                        <div class="layui-btn-group ">-->
        <!--                            <button type="button" class="layui-btn layui-btn-sm  layui-btn-primary praise"-->
        <!--                                    style="border: none;">-->
        <!--                                <i class="layui-icon">&#xe6c6;</i>-->
        <!--                            </button>-->
        <!--                            <button type="button" class="layui-btn layui-btn-sm  layui-btn-primary browse"-->
        <!--                                    style="border: none;">-->
        <!--                                <i class="fa fa-eye"></i>-->
        <!--                            </button>-->
        <!--                        </div>-->
        <!--                    </div>-->
        <!--                    <div class=" col-md-3 box col-xs-6 photo_hight">-->
        <!--                        <div class="photo_hidden"><img src="images/konwmore.png" alt=" "-->
        <!--                                                       class="img-responsive center-block "></div>-->
        <!--                        <a href="#">-->
        <!--                            <h4 style="text-align: center;"><strong>了解更多精彩</strong></h4>-->
        <!--                            <p class="text_hidden "></p>-->
        <!--                            &lt;!&ndash; <span class="layui-badge-rim recommend layui-bg-blue">Hot</span> &ndash;&gt;-->
        <!--                        </a>-->
        <!--                    </div>-->
        <!--                </div>-->
        <!--            </div>-->
        <!--        </div>-->
        <!--        <div class="item">-->
        <!--            <div class="head">-->
        <!--                <h3><strong>法学院</strong></h3>-->
        <!--            </div>-->
        <!--            <div class="container " style="margin-top: 2rem; background-color: #fff; ">-->
        <!--                <div class="row ">-->
        <!--                    <div class=" col-md-3 box col-xs-6 photo_hight">-->

        <!--                        <div class="photo_hidden"><img-->
        <!--                                src="http://sxgl.henu.edu.cn:80//index/showImage.do?type=3&img=%2Fuploadimg%2F%E5%9B%BE%E7%89%87%2F2020%E5%B9%B409%E6%9C%8807%E6%97%A5__7f41b4201612184c515924169a8079b09d09a147%2F4103535362.jpg "-->
        <!--                                alt=" " class="img-responsive center-block"></div>-->
        <!--                        <a href="#">-->
        <!--                            <h4 style="text-align: center;"><strong>河大LOGO</strong></h4>-->
        <!--                            <p class="text_hidden">人海加油</p>-->
        <!--                            &lt;!&ndash; <span class="layui-badge-rim recommend layui-bg-blue">Hot</span> &ndash;&gt;-->
        <!--                        </a>-->
        <!--                        <div class="layui-btn-group ">-->
        <!--                            <button type="button" class="layui-btn layui-btn-sm  layui-btn-primary praise"-->
        <!--                                    style="border: none;">-->
        <!--                                <i class="layui-icon">&#xe6c6;</i>-->
        <!--                            </button>-->
        <!--                            <button type="button" class="layui-btn layui-btn-sm  layui-btn-primary browse"-->
        <!--                                    style="border: none;">-->
        <!--                                <i class="fa fa-eye"></i>-->
        <!--                            </button>-->
        <!--                        </div>-->
        <!--                    </div>-->
        <!--                    <div class=" col-md-3 box col-xs-6 photo_hight">-->

        <!--                        <div class="photo_hidden"><img-->
        <!--                                src="http://sxgl.henu.edu.cn:80//index/showImage.do?type=3&img=%2Fuploadimg%2F%E5%9B%BE%E7%89%87%2F2020%E5%B9%B409%E6%9C%8814%E6%97%A5__44add6fd8de55fb3a3b53086bb61f9a7e5bb3b24%2F%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%8720200914083807.jpg"-->
        <!--                                alt=" " class=" center-block"></div>-->
        <!--                        <a href="#">-->
        <!--                            <h4 style="text-align: center;"><strong>新生报到</strong></h4>-->
        <!--                            <p class="text_hidden ">人海加油</p>-->
        <!--                            &lt;!&ndash; <span class="layui-badge-rim recommend layui-bg-blue">Hot</span></a> &ndash;&gt;-->
        <!--                        </a>-->
        <!--                        <div class="layui-btn-group">-->
        <!--                            <button type="button" class="layui-btn layui-btn-sm  layui-btn-primary praise"-->
        <!--                                    style="border: none;">-->
        <!--                                <i class="layui-icon">&#xe6c6;</i>-->
        <!--                            </button>-->
        <!--                            <button type="button" class="layui-btn layui-btn-sm  layui-btn-primary browse"-->
        <!--                                    style="border: none;">-->
        <!--                                <i class="fa fa-eye"></i>-->
        <!--                            </button>-->
        <!--                        </div>-->
        <!--                    </div>-->
        <!--                    <div class=" col-md-3 box col-xs-6 photo_hight">-->

        <!--                        <div class="photo_hidden"><img-->
        <!--                                src="http://sxgl.henu.edu.cn:80//index/showImage.do?type=3&img=%2Fuploadimg%2F%E5%9B%BE%E7%89%87%2F2020%E5%B9%B409%E6%9C%8810%E6%97%A5__474ddabfcd2b49c754e689ee0519a922428a3475%2FF2A1B8CAD5F51BDF42B818771EF4B030ECD185C9.jpg"-->
        <!--                                alt=" " class="img-responsive center-block "></div>-->
        <!--                        <a href="#">-->
        <!--                            <h4 style="text-align: center;"><strong>考察调研</strong></h4>-->
        <!--                            <p class="text_hidden ">民进中央副主席、秘书长高友东来我校考察调研</p>-->
        <!--                            &lt;!&ndash; <span class="layui-badge-rim recommend layui-bg-blue">Hot</span>-->
        <!--                     &ndash;&gt;-->
        <!--                        </a>-->
        <!--                        <div class="layui-btn-group">-->
        <!--                            <button type="button" class="layui-btn layui-btn-sm  layui-btn-primary praise"-->
        <!--                                    style="border: none;">-->
        <!--                                <i class="layui-icon">&#xe6c6;</i>-->
        <!--                            </button>-->
        <!--                            <button type="button" class="layui-btn layui-btn-sm  layui-btn-primary browse"-->
        <!--                                    style="border: none;">-->
        <!--                                <i class="fa fa-eye"></i>-->
        <!--                            </button>-->
        <!--                        </div>-->
        <!--                    </div>-->
        <!--                    <div class=" col-md-3 box col-xs-6 photo_hight">-->

        <!--                        <div class="photo_hidden"><img src="images/konwmore.png" alt=" "-->
        <!--                                                       class="img-responsive center-block "></div>-->
        <!--                        <a href="#">-->
        <!--                            <h4 style="text-align: center;"><strong>了解更多精彩</strong></h4>-->
        <!--                            <p class="text_hidden "></p>-->
        <!--                            &lt;!&ndash; <span class="layui-badge-rim recommend layui-bg-blue">Hot</span> &ndash;&gt;-->
        <!--                        </a>-->
        <!--                    </div>-->
        <!--                </div>-->
        <!--            </div>-->
        <!--        </div>-->
        <!--        <div class="item">-->
        <!--            <div class="head">-->
        <!--                <h3><strong>历史文化学院</strong></h3>-->
        <!--            </div>-->
        <!--            <div class="container " style="margin-top: 2rem; background-color: #fff; ">-->
        <!--                <div class="row ">-->
        <!--                    <div class=" col-md-3 box col-xs-6 photo_hight">-->

        <!--                        <div class="photo_hidden"><img-->
        <!--                                src="http://sxgl.henu.edu.cn:80//index/showImage.do?type=3&img=%2Fuploadimg%2F%E5%9B%BE%E7%89%87%2F2020%E5%B9%B409%E6%9C%8807%E6%97%A5__7f41b4201612184c515924169a8079b09d09a147%2F4103535362.jpg "-->
        <!--                                alt=" " class="img-responsive center-block"></div>-->
        <!--                        <a href="#">-->
        <!--                            <h4 style="text-align: center;"><strong>河大LOGO</strong></h4>-->
        <!--                            <p class="text_hidden">人海加油</p>-->
        <!--                            &lt;!&ndash; <span class="layui-badge-rim recommend layui-bg-blue">Hot</span> &ndash;&gt;-->
        <!--                        </a>-->
        <!--                        <div class="layui-btn-group ">-->
        <!--                            <button type="button" class="layui-btn layui-btn-sm  layui-btn-primary praise"-->
        <!--                                    style="border: none;">-->
        <!--                                <i class="layui-icon">&#xe6c6;</i>-->
        <!--                            </button>-->
        <!--                            <button type="button" class="layui-btn layui-btn-sm  layui-btn-primary browse"-->
        <!--                                    style="border: none;">-->
        <!--                                <i class="fa fa-eye"></i>-->
        <!--                            </button>-->
        <!--                        </div>-->
        <!--                    </div>-->
        <!--                    <div class=" col-md-3 box col-xs-6 photo_hight">-->

        <!--                        <div class="photo_hidden"><img-->
        <!--                                src="http://sxgl.henu.edu.cn:80//index/showImage.do?type=3&img=%2Fuploadimg%2F%E5%9B%BE%E7%89%87%2F2020%E5%B9%B409%E6%9C%8814%E6%97%A5__44add6fd8de55fb3a3b53086bb61f9a7e5bb3b24%2F%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%8720200914083807.jpg"-->
        <!--                                alt=" " class=" center-block"></div>-->
        <!--                        <a href="#">-->
        <!--                            <h4 style="text-align: center;"><strong>新生报到</strong></h4>-->
        <!--                            <p class="text_hidden ">人海加油</p>-->
        <!--                            &lt;!&ndash; <span class="layui-badge-rim recommend layui-bg-blue">Hot</span></a> &ndash;&gt;-->
        <!--                        </a>-->
        <!--                        <div class="layui-btn-group">-->
        <!--                            <button type="button" class="layui-btn layui-btn-sm  layui-btn-primary praise"-->
        <!--                                    style="border: none;">-->
        <!--                                <i class="layui-icon">&#xe6c6;</i>-->
        <!--                            </button>-->
        <!--                            <button type="button" class="layui-btn layui-btn-sm  layui-btn-primary browse"-->
        <!--                                    style="border: none;">-->
        <!--                                <i class="fa fa-eye"></i>-->
        <!--                            </button>-->
        <!--                        </div>-->
        <!--                    </div>-->
        <!--                    <div class=" col-md-3 box col-xs-6 photo_hight">-->

        <!--                        <div class="photo_hidden"><img-->
        <!--                                src="http://sxgl.henu.edu.cn:80//index/showImage.do?type=3&img=%2Fuploadimg%2F%E5%9B%BE%E7%89%87%2F2020%E5%B9%B409%E6%9C%8810%E6%97%A5__474ddabfcd2b49c754e689ee0519a922428a3475%2FF2A1B8CAD5F51BDF42B818771EF4B030ECD185C9.jpg"-->
        <!--                                alt=" " class="img-responsive center-block "></div>-->
        <!--                        <a href="#">-->
        <!--                            <h4 style="text-align: center;"><strong>考察调研</strong></h4>-->
        <!--                            <p class="text_hidden ">民进中央副主席、秘书长高友东来我校考察调研</p>-->
        <!--                            &lt;!&ndash; <span class="layui-badge-rim recommend layui-bg-blue">Hot</span>-->
        <!--                     &ndash;&gt;-->
        <!--                        </a>-->
        <!--                        <div class="layui-btn-group">-->
        <!--                            <button type="button" class="layui-btn layui-btn-sm  layui-btn-primary praise"-->
        <!--                                    style="border: none;">-->
        <!--                                <i class="layui-icon">&#xe6c6;</i>-->
        <!--                            </button>-->
        <!--                            <button type="button" class="layui-btn layui-btn-sm  layui-btn-primary browse"-->
        <!--                                    style="border: none;">-->
        <!--                                <i class="fa fa-eye"></i>-->
        <!--                            </button>-->
        <!--                        </div>-->
        <!--                    </div>-->
        <!--                    <div class=" col-md-3 box col-xs-6 photo_hight">-->

        <!--                        <div class="photo_hidden"><img src="images/konwmore.png" alt=" "-->
        <!--                                                       class="img-responsive center-block "></div>-->
        <!--                        <a href="#">-->
        <!--                            <h4 style="text-align: center;"><strong>了解更多精彩</strong></h4>-->
        <!--                            <p class="text_hidden "></p>-->
        <!--                            &lt;!&ndash; <span class="layui-badge-rim recommend layui-bg-blue">Hot</span> &ndash;&gt;-->
        <!--                        </a>-->
        <!--                    </div>-->
        <!--                </div>-->
        <!--            </div>-->
        <!--        </div>-->
    </div>
</div>

<div class="container" style="margin-top: 2rem; text-align: center;">
    <a href="/#/page/all_photo.html">
        <h4>查看更多</h4>
    </a>
</div>

<script>
    //学院选择
    jq1111.ajax({
        type: "GET",
        crossDomain: true,
        async:false,
        url: BasePath + "api/School/Colleges",
        contentType: "application/json",
        dataType: "json",
        xhrFields: {
            withCredentials: true
        },
        success: function (message) {
            var colleges = message.data;
            console.log(message);
            for (i = 0; i < colleges.length; i++) {
                if (i === 0) {
                    jq1111("#college-list-body").append('<li class="current">' + colleges[i].name + '</li>')
                } else {
                    jq1111("#college-list-body").append('<li>' + colleges[i].name + '</li>')
                }

                //插入查看更多
                jq1111("#college-body").append('<div class="head">\n' +
                    '                <h3><strong>'+colleges[i].name+'</strong></h3>\n' +
                    '            </div>\n' +
                    '            <div class="container " style="margin-top: 2rem; background-color: #fff; ">\n' +
                    '                <div class="row ">\n' +
                    '                    <div class=" col-md-3 box col-xs-6 photo_hight" id="album-more-id-'+colleges[i].id+'">\n' +
                    '                        <div class="photo_hidden"><img src="images/konwmore.png" alt=" "\n' +
                    '                                                       class="img-responsive center-block "></div>\n' +
                    '                        <a href="?collegeId='+colleges[i].id+'#/page/all_photo.html">\n' +
                    '                            <h4 style="text-align: center;"><strong>了解更多精彩</strong></h4>\n' +
                    '                            <p class="text_hidden "></p>\n' +
                    '                            <!-- <span class="layui-badge-rim recommend layui-bg-blue">Hot</span> -->\n' +
                    '                        </a>\n' +
                    '                    </div>\n' +
                    '                </div>\n' +
                    '            </div>')



                //获取相册
                jq1111.ajax({
                    type: "GET",
                    crossDomain:true,
                    async:false,
                    url: BasePath+"api/Album/Query?page=1&limit=4&collegeId="+colleges[i].id,
                    contentType: "application/json",
                    dataType:"json",
                    xhrFields: {
                        withCredentials: true
                    },
                    success:function (message) {
                        console.log(message);
                        console.log(message.data[0],colleges[0].id)
                        for (j=0;j<message.data.length;j++){
                            if(message.data[j].coverid===null){
                                continue
                            }
                            if(message.data[j].albumType==="GroupAlbum"){
                                jq1111("#album-more-id-"+colleges[i].id).before('<div class=" col-md-3 box col-xs-6 photo_hight">\n' +
                                    '                        <div class="photo_hidden"><img\n' +
                                    '                                src="' + BasePath + 'api/resource/' + message.data[j].coverId+ '"\n' +
                                    '                                alt=" " class="img-responsive center-block"></div>\n' +
                                    '                        <a href="'+BasePath+'page/admin/group-album-manage/show.html?albumId='+message.data[j].albumId+'">\n' +
                                    '                            <h4 style="text-align: center;"><strong>'+message.data[j].title+'</strong></h4>\n' +
                                    '                            <!-- <span class="layui-badge-rim recommend layui-bg-blue">Hot</span> -->\n' +
                                    '                        </a>\n' +
                                    '                        <div class="layui-btn-group ">\n' +
                                    '                            <button type="button" class="layui-btn layui-btn-sm  layui-btn-primary praise"\n' +
                                    '                                    onclick="ilikeit('+message.data[j].id+')" style="border: none;">\n' +
                                    '                                <i class="layui-icon">&#xe6c6;</i>\n' +message.data[j].likeCount+
                                    '                            </button>\n' +
                                    '                            <button type="button" class="layui-btn layui-btn-sm  layui-btn-primary browse"\n' +
                                    '                                    style="border: none;">\n' +
                                    '                                <i class="fa fa-eye"></i>\n' +message.data[j].downloadCount+
                                    '                            </button>\n' +
                                    '                        </div>\n' +
                                    '                    </div>')

                            }else{
                                jq1111("#album-more-id-"+colleges[i].id).before('<div class=" col-md-3 box col-xs-6 photo_hight">\n' +
                                    '                        <div class="photo_hidden"><img\n' +
                                    '                                src="' + BasePath + 'api/resource/' + message.data[j].coverId+ '"\n' +
                                    '                                alt=" " class="img-responsive center-block"></div>\n' +
                                    '                        <a href="'+BasePath+'page/new-show.html?albumId='+message.data[j].albumId+'">\n' +
                                    '                            <h4 style="text-align: center;"><strong>'+message.data[j].title+'</strong></h4>\n' +
                                    '                            <p class="text_hidden">'+message.data[j].description+'</p>\n' +
                                    '                            <!-- <span class="layui-badge-rim recommend layui-bg-blue">Hot</span> -->\n' +
                                    '                        </a>\n' +
                                    '                        <div class="layui-btn-group ">\n' +
                                    '                            <button type="button" class="layui-btn layui-btn-sm  layui-btn-primary praise"\n' +
                                    '                                    onclick="ilikeit('+message.data[j].id+')" style="border: none;">\n' +
                                    '                                <i class="layui-icon">&#xe6c6;</i>\n' +message.data[j].likeCount+
                                    '                            </button>\n' +
                                    '                            <button type="button" class="layui-btn layui-btn-sm  layui-btn-primary browse"\n' +
                                    '                                    style="border: none;">\n' +
                                    '                                <i class="fa fa-eye"></i>\n' +message.data[j].downloadCount+
                                    '                            </button>\n' +
                                    '                        </div>\n' +
                                    '                    </div>')
                            }
                        }


                    },
                    error:function (message) {
                        console.log(message.responseJSON);
                    },
                });


            }
        },
        error: function (message) {
            console.log(message.responseJSON);
            layer.msg('失败:' + message.responseJSON.message);
        },
    });

    function ilikeit(id) {
        try {
            jq1111.ajax({
                type: "POST",
                crossDomain:true,
                async:false,
                url: BasePath+"api/Album/"+id+"/Like",
                contentType: "application/json",
                dataType:"json",
                xhrFields: {
                    withCredentials: true
                },
                success:function (message) {
                    alert('点赞成功');
                    location.reload();

                },
                error:function (message) {
                    console.log(message.responseJSON);
                },
            });
        }catch (e) {
            console.log(e)
        }
    }

</script>

<script>
    var tab_list = document.querySelector(".tab_list");
    var lis = tab_list.querySelectorAll("li");
    var item = document.querySelectorAll(".item");
    for (var i = 0; i < lis.length; i++) {
        lis[i].setAttribute("index", i);
        lis[i].onclick = function () {
            for (var i = 0; i < lis.length; i++) {
                lis[i].className = "";
            }
            //this.className = "current";
            var index = this.getAttribute("index");
            for (var k = 0; k < item.length; k++) {
                item[k].style.display = "none";
            }
            item[index].style.display = "block";
        }
    }
</script>

</html>